import React, { useEffect, useState, Suspense, useRef } from 'react'
import { Outlet, useLocation } from 'react-router-dom'
import { ToolOutlined, UserOutlined, UnorderedListOutlined } from '@ant-design/icons';
import { Avatar, Popover } from 'antd';
import PageLoading from '../../component/pageLoading'
import QuitPopover from '../../component/quitPopover'
import FunctionMenu from '../../component/functionMenu'

import { userName_cache_key } from '../../utils/cache/cacheKey'
import { getCache } from '../../utils/cache/'

//时间工具类
import moment from 'moment'

import styles from './index.module.css'

function Mian() {
    // 如果没有state，将state设为一个空对象
    const location = useLocation()
    const state = location.state || {}

    const [time, setTIme] = useState('');
    const [week, setWeek] = useState('加载中...');
    const [isModalOpen, setModalOpen] = useState(false);
    const [isPopoverOpen, setPopoverOpen] = useState(false);
    const [userName, setUserName] = useState('');

    const intervalId = useRef(null);

    //[]空数组相当于componentDidMount
    useEffect(() => {
        initData();
        intervalId.current = setInterval(function () {
            getCurryTime()
            getWeek()
        }, 1000 * 1);
        //返回的函数相当于unmountComponentAtNode
        return () => {
            clearInterval(intervalId.current);
        }
    }, []);

    function initData() {
        if (state != null && state.params != null) {
            setUserName(state.params.userName)
        } else {
            const userName = getCache(userName_cache_key)
            setUserName(userName)
        }
    }

    function getCurryTime() {
        const now = moment();
        moment.locale('zh-cn')
        setTIme(now.format('HH:mm:ss'))
    }

    function clickFunctionMenu() {
        setModalOpen(true);
    }

    function functionMenuCancel() {
        setModalOpen(false);
    };

    function getWeek() {
        const options = { weekday: 'long' };
        const today = new Date();
        setWeek(today.toLocaleDateString('zh-CN', options))
    }

    function handleOpenChange(newOpen) {
        setPopoverOpen(newOpen);
    };

    function functionPopoverCancel() {
        setPopoverOpen(false);
    };

    return (
        <div className={styles.container}>
            <FunctionMenu isModalOpen={isModalOpen} functionMenuCancel={functionMenuCancel}></FunctionMenu>
            <div className={styles.head}>
                <div className={styles.logo}>
                    <ToolOutlined style={{ marginLeft: '15px' }} />
                    <span style={{ marginLeft: '5px' }}>推送管理平台</span>
                </div>
                <div className={styles.time_box}>
                    <span className={styles.time}>{time}</span>
                    <span className={styles.week}>{week}</span>
                </div>
                <div className={styles.function}>
                    <Avatar className={styles.function_menu} onClick={clickFunctionMenu} size="small" icon={<UnorderedListOutlined />} />
                    <Popover trigger="click" content={<QuitPopover functionPopoverCancel={functionPopoverCancel} />} open={isPopoverOpen} onOpenChange={handleOpenChange} >
                        <Avatar className={styles.name_ico} size="small" icon={<UserOutlined />} />
                        <span className={styles.name}>{userName}</span>
                    </Popover>
                </div>
            </div>
            <Suspense fallback={<PageLoading />}>
                <Outlet ></Outlet>
            </Suspense>
        </div>
    )
}

export default Mian;
